<template>
  <div class="import-container">
    <h2 class="title">📂 题库文件导入</h2>
    <p class="desc">上传 Excel 文件前，请先填写题库名称。</p>

    <!-- 题库名称输入 -->
    <el-form :model="form" :rules="rules" ref="form" label-width="90px" style="max-width: 500px; margin: 0 auto 20px;">
      <el-form-item label="题库名称" prop="subject">
        <el-input
          v-model="form.subject"
          placeholder="请输入题库名称，如：Java基础题库"
          clearable
        />
      </el-form-item>
    </el-form>

    <!-- 模板下载 -->
    <div style="text-align: center; margin-bottom: 20px;">
      <el-button type="primary" size="small" @click="downloadTemplate">
        📥 下载 Excel 导入模板
      </el-button>
    </div>

    <!-- 文件上传（使用自定义上传） -->
    <el-upload
      class="upload-box"
      drag
      :action="'#'"
      :http-request="customUpload" 
      :show-file-list="true"
      accept=".xlsx"
      :before-upload="beforeUpload"
      :on-error="handleError"
      :disabled="uploading"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将 <em>Excel 文件</em> 拖到此处，或 <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">
        仅支持 .xlsx 格式，文件大小不超过 10MB
      </div>
    </el-upload>

    <!-- 成功提示 -->
    <div v-if="success" class="success-box">
      <el-alert
        title="导入成功！"
        :description="successDesc"
        type="success"
        show-icon
      />

      <!-- 错误/警告提示 -->
      <el-button
        v-if="hasErrors"
        type="warning"
        size="small"
        style="margin-top: 10px;"
        @click="showErrorDialog = true"
      >
        查看 {{ errorCount }} 条警告或跳过记录
      </el-button>

      <div style="text-align: center; margin-top: 20px;">
        <el-button type="primary" @click="goToQuestionBank">查看题库</el-button>
      </div>
    </div>

    <!-- 错误详情弹窗 -->
    <el-dialog title="⚠️ 跳过或错误记录" :visible.sync="showErrorDialog" width="600px">
      <div v-if="importErrors.length > 0">
        <p
          v-for="(err, index) in importErrors"
          :key="index"
          style="margin: 8px 0; color: #999; font-size: 14px; line-height: 1.5"
        >
          <strong>第 {{ err.row }} 行：</strong>{{ err.error }}
        </p>
      </div>
      <p v-else style="color: #666;">所有题目均成功导入，无错误记录。</p>
    </el-dialog>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
import axios from 'axios'; // 需要引入 axios

export default {
  data() {
    return {
      form: {
        subject: '' // 用户输入的题库名称
      },
      rules: {
        subject: [
          { required: true, message: '请输入题库名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ]
      },
      success: false,
      uploading: false,
      showErrorDialog: false,
      importErrors: [],
      importStats: {
        single: 0,
        multiple: 0,
        judge: 0,
        total: 0
      }
    };
  },

  computed: {
    successDesc() {
      const { single, multiple, judge, total } = this.importStats;
      return `共导入 ${total} 道题目：单选题 ${single} 道，多选题 ${multiple} 道，判断题 ${judge} 道。`;
    },
    hasErrors() {
      return this.importErrors.length > 0;
    },
    errorCount() {
      return this.importErrors.length;
    }
  },

  methods: {
    downloadTemplate() {
      const templateData = [
    {
      '题干*': '在旅客列车上无正当理由，拒绝安全检查，不听劝阻、制止、教育的，按（）认定，依照《治安管理处罚法》进行处罚。',
      '题型*': '单项选择题',
      '答案*': 'B',
      '选项A': '扰乱单位秩序',
      '选项B': '扰乱公共交通工具上的秩序',
      '选项C': '妨碍交通工具正常行驶',
      '选项D': '阻碍执行职务',
      '试题分数*': '1'
    },
    {
      '题干*': '非法拦截或者强登、扒乘列车，影响列车正常行驶，尚未造成严重后果的，按（）认定，依照《治安管理处罚法》进行处罚。',
      '题型*': '单项选择题',
      '答案*': 'A',
      '选项A': '妨碍交通工具正常行驶',
      '选项B': '阻碍执行职务',
      '选项C': '扰乱公共交通工具上的秩序',
      '选项D': '扰乱公共场所秩序',
      '试题分数*': '1'
    },
    {
      '题干*': '在站车反复纠缠、强行讨要或者以其他滋扰他人的方式乞讨的，按（）认定，依照《治安管理处罚法》进行处罚。',
      '题型*': '单项选择题',
      '答案*': 'A',
      '选项A': '以滋扰他人方式乞讨',
      '选项B': '扰乱公共场所秩序',
      '选项C': '阻碍执行职务',
      '选项D': '以胁迫、诱骗或者利用他人的方式乞讨',
      '试题分数*': '1'
    },
    {
      '题干*': '在站车胁迫、诱骗或者利用他人乞讨的，按（）认定，依照《治安管理处罚法》进行处罚。',
      '题型*': '单项选择题',
      '答案*': 'B',
      '选项A': '以滋扰他人方式乞讨',
      '选项B': '以胁迫、诱骗或者利用他人的方式乞讨',
      '选项C': '扰乱公共场所秩序',
      '选项D': '阻碍执行职务',
      '试题分数*': '1'
    }
  ];

      const ws = XLSX.utils.json_to_sheet(templateData);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, '题库模板');
      XLSX.writeFile(wb, '题库导入模板.xlsx');
    },

    beforeUpload(file) {
      const isXlsx = file.name.endsWith('.xlsx');
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isXlsx) {
        this.$message.error('上传文件只能是 .xlsx 格式!');
      }
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过 10MB!');
      }

      return isXlsx && isLt10M;
    },

    async customUpload({ file, onSuccess, onError }) {
  this.$refs.form.validate(async valid => {
    if (!valid) {
      this.$message.error('请先填写题库名称');
      onError(new Error('验证失败'));
      return;
    }

    // ✅ 2. 校验通过后，再创建 formData
    const formData = new FormData();
    formData.append('file', file);
    formData.append('subject', this.form.subject);

    // ✅ 3. 打印 formData 内容（用于调试）
    console.log('--- FormData 内容 ---');
    for (let [key, value] of formData.entries()) {
      console.log(key, '=>', value);
    }
    console.log('------------------------');


    this.uploading = true;

    try {
  const res = await axios.post('/api/questions/import', formData, {
    headers: {
      'Authorization': 'Bearer ' + this.$store.getters.token
    },
    timeout: 30000
  });

  const response = res.data;

  if (response && response.code === 200) {
    this.handleSuccess(response);
    onSuccess(response);
  } else {
    const msg = (response && response.message) || '导入失败，请检查文件内容';
    this.$message.error(msg);
    onError(new Error(msg));
  }
} catch (err) {
      let msg = '上传失败';

      if (!err.response) {
        if (err.request) {
          msg = '网络连接失败，请检查后端服务是否运行（如：http://localhost:9202）';
        } else {
          msg = '请求异常：' + (err.message || '未知错误');
        }
      } else {
        const responseData = err.response.data;
        const status = err.response.status;

        msg =
          (responseData && (responseData.message || responseData.error)) ||
          `服务器错误 (${status})`;
      }

      this.$message.error(msg);
      onError(err);
    } finally {
      // ✅ 9. 无论成功失败，都关闭 loading
      this.uploading = false;
    }
  });
},

    handleSuccess(response) {
  // ✅ 防御：防止 response 为 undefined
  if (!response || !response.data) {
    this.$message.error('服务器返回数据异常');
    return;
  }

  const data = response.data;

  // 安全赋值，防止字段不存在
  this.importStats = {
    single: Number(data.single) || 0,
    multiple: Number(data.multiple) || 0,
    judge: Number(data.judge) || 0,
    total: Number(data.total) || 0
  };

  this.importErrors = Array.isArray(data.errors)
    ? data.errors.map(e => ({ row: e.row, error: e.error }))
    : [];

  this.success = true;
  this.$message.success(`导入成功，共 ${this.importStats.total} 道题目`);
},

    handleError(err) {
      console.error('Upload error:', err);
    },

    goToQuestionBank() {
      this.$router.push('/question-bank');
    }
  }
};
</script>
<style scoped>
.import-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 30px 40px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.title {
  text-align: center;
  color: #1890ff;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 22px;
}

.desc {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin-bottom: 24px;
  line-height: 1.5;
}

.upload-box {
  margin: 25px 0;
}

.upload-box ::v-deep .el-upload-dragger {
  width: 100%;
  min-height: 180px;
  border-radius: 10px;
  border: 2px dashed #d9d9d9;
}

.upload-box ::v-deep .el-upload-dragger:hover {
  border-color: #1890ff;
  background-color: #fafafa;
}

.upload-box ::v-deep .el-icon-upload {
  font-size: 48px;
  color: #999;
  margin-top: 20px;
}

.upload-box ::v-deep .el-upload__text {
  font-size: 15px;
  color: #666;
}

.upload-box ::v-deep .el-upload__tip {
  font-size: 13px;
  color: #999;
  margin-top: 8px;
}

.success-box {
  margin-top: 30px;
  padding: 24px;
  border: 1px dashed #e8f3ff;
  border-radius: 8px;
  background-color: #f6faff;
  text-align: center;
}

/* 防止样式被穿透影响，使用 scoped 和深度选择器 */
::v-deep .el-dialog__body {
  padding: 20px;
  max-height: 500px;
  overflow-y: auto;
}
</style>